<template>
    <s-layout id="layout" :title="'上交合同列表'" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor" :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
        <view class="call_on list_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view class="menu">
                <up-tabs :list="state.menulist" @click="menulistclick" :current="state.currentTab"></up-tabs>
            </view>
            <scroll-view scroll-y class="comprehensive" v-if="list.length" @scrolltolower='listScrolltolower'
            show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
            :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">
                <view class="item_wrap">
                    <view class="item" v-for="(item, index) in list" :key="index">
                        <view class="flex">
                            <image class="flex_img" :src="`${baseUrl}/uploads/uniapp_image/staff/shenpi_icon2.png`" mode="scaleToFill" />
                            <view class="item_left">
                                <view class="item_left_box">
                                    <view :class="item.state == 0 ? 'yellow' : 'green'" v-if="item.status !== 0"> {{ item.state == 0 ? '已提交' : '已确认' }}</view>
                                    <view class="title">{{ item.user.nickname }}提交的上交合同</view>
                                </view>
                                <view class="item_left_box">
                                    <text class="name">合同名称：{{ item.title }}</text>
                                </view>
                                <view class="item_left_box">
                                    <text class="name">甲方名称：{{ item.first_party }}</text>
                                </view>
                                <view class="item_left_box">
                                    <text class="name">乙方名称：{{ item.second_party }}</text>
                                </view>
                                <view class="item_left_box">
                                    <view class="time_money">起止日期</view>
                                    <text class="name">{{item.start_date}}-{{item.end_date}}</text>
                                </view>
                            </view>
                            <view class="item_right" @click="lookDetail(item)">
                                <text class="name">查看详情</text>
                                <u-icon size="10" name="arrow-right" color="#0038F7"></u-icon>
                            </view>
                        </view>
                        <view class="button_box" @tap="affirm(item.id)" v-if="item.state == 0 && jurisdiction.includes(group_id)">
                            <view class="affirm">确认</view>
                        </view>
                    </view>
                </view>
                <!-- 正在加载组件 -->
                <view>
                    <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </scroll-view>
            <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
        </view>
    </s-layout>
    <!-- <添加按钮 -->
    <view>
        <s-button @netWork="submitForm" :text="state.text"></s-button>
    </view>
</template>

<script setup>
    import { baseUrl } from '@/sheep/config';
    import sheep from '@/sheep';
    import { onLoad, onShow } from "@dcloudio/uni-app";
    import { ref, reactive } from 'vue';
    import { formatDate } from '@/utils/fn.js';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    const state = ref({
        bgColor: '#fff',
        text: '上交合同',
        menulist: [
            { name: '全部', value: '' },
            { name: '已提交', value: '0' },
            { name: '已确认', value: '1' },
        ],
        currentTab: 0,
        status: ''
    })
    const list = ref([])
    const listPage = ref()
    const listlast_page = ref();
    const listpagenumber = ref(1);
    onLoad((options) => {
        const userStoreValue = uni.getStorageSync('user-store');
        const userStoreObject = JSON.parse(userStoreValue)
        group_id.value = userStoreObject.userInfo.group_id
        list.value = [];
        listpagenumber.value = 1 ;
        getListDetail()
    })
    const group_id = ref()
    const jurisdiction = ref([4,6])
    //点击切换菜单  
    const menulistclick = (item) => {
        list.value = [];
        state.value.status = item.value;
        listpagenumber.value = 1;
        getListDetail()
    }
    // 1.
    const loadmoreRef = ref()
    //数据请求
    const getListDetail = () => {
        let obj = {
            // title:
            // first_party:
            state: state.value.status,
        };
        let params = {
            filter: JSON.stringify(obj),
            op: JSON.stringify({
                // title:'LIKE',
                // first_party:'LIKE',
                state: '=',
            }),
            page: listpagenumber.value,
        };
        sheep.$api.turn_in_contract.contract_submitIndex(params).then((resust) => {
            list.value = [...list.value, ...resust?.data.rows];
            listPage.value = resust.data.current_page
            listlast_page.value = resust.data.last_page
        });
    }

    //滚动触底
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        if (listPage.value < listlast_page.value) {
            listpagenumber.value += 1;
        } else {
            return;
        }
        getListDetail();
    };
    // 跳转详情页面  携带参数
    const lookDetail = (item) => {
        sheep.$router.go('/subpackage/staff/workbench/turn_in_contract/turn_in_contract_details', {
            ids: item.id,
        });
    }
    //跳转新增页面
    const submitForm = () => {
        sheep.$router.go('/subpackage/staff/workbench/turn_in_contract/turn_in_contract_add');
    }

    // 确认 已确认
    const affirm = (id) => {
        uni.$u.throttle(() => {
            let params = {
                ids:id
            }
            sheep.$api.turn_in_contract.contract_submitConfirm(params).then((res) => {
                sheep.$helper.toast(res.msg);
                if (res.code == 1) {
                    setTimeout(function () {
                        list.value = [];
                        listpagenumber.value = 1;
                        getListDetail();
                    }, 1000);
                }
            });
        }, 1000);
    }

    // 页面下拉刷新
    const freshing = ref(false)
    const triggered = ref(false)
    const isOpenRefresh = ref(true)  // 是否开启下拉
    // 自定义下拉刷新控件被下拉
    const onPulling = (e) => {
        if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
        triggered.value = true;
    }
    // 自定义下拉刷新被触发
    const onRefresh = () => {
        if (freshing.value) return;
            freshing.value = true;
        setTimeout(() => {
            listpagenumber.value = 1;
            list.value = []
            triggered.value = false;
            freshing.value = false;
        getListDetail();
        }, 500);
    }
    // 自定义下拉刷新被复位
    const onRestore = () => {
        triggered.value = 'restore'; // 需要重置
    }
    // 自定义下拉刷新被中止
    const onAbort = () => {
    }
</script>

<style lang="scss" scoped>
  @import '../compentns/publiclist.scss';
 :deep( .u-tabs__wrapper__nav__item) {
  width: 28% !important;
}
    .orange {
        font-family: PingFangSC;
        color: #FF6600;
        font-weight: 500;
        font-size:$uni-font-size-26;
    }
    // 滚动
    .comprehensive {
        width: calc(100% - 40rpx);
        background-color: rgba(0, 0, 0, 0);
        margin: 0 20rpx;
        height: 74vh;
    }

    .item {
        padding-bottom: 24rpx;
    }

    .time_money {
        color: #666666;
        font-weight: 500;
        font-size:$uni-font-size-26;
        margin-right: 16rpx;
    }

    .item_left {
        .item_left_box {
            margin-bottom: 10rpx !important;
        }
    }
    .item_left_box_special {
        display: flex;
        justify-content: left;
        .bumen {
            width: 296rpx;
        }
    }
    .branch {
        justify-content: left;
        color: #666666;
        font-weight: 500;
        font-size:$uni-font-size-26;
    }

    .company_name {
        justify-content: left;
        color: #666666;
        font-weight: 500;
        font-size:$uni-font-size-26;
    }

    .flex {
        &:last-child {
            display: flex;
            align-items: center;
            border-top: 1rpx solid #efefef;
            margin-top: 10rpx;
            .item_left_box {
                color: #666666;
                font-weight: 400;
                font-size:$uni-font-size-26;
                .box_name {
                    margin-right: 10rpx;
                }
            }
        }
    }

    // 确认按钮
    .button_box {
        display: flex;
        justify-content: flex-end;
        text-align: center;
    }
    .affirm {
        margin-right: 30rpx;
        width: 150rpx;
        height: 60rpx;
        border-radius: 16px;
        color: #ffffff;
        line-height: 60rpx;
        font-weight: 500;
        font-size: 30rpx;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }
</style>